<template>
    <div class="content">
        <p v-for="(val,key) in list.title" :key="key">
          <span class="title">{{val.label}}：</span>
          <span class='xq' v-for='(item,key) in list.content' v-if='item[val.prop]'>{{item[val.prop]}}</span>
        </p>
        <div class="btn">
              <el-button type="primary" @click="back">返回上一级</el-button>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      list : {
          title : [
            {label : '模板ID',prop : 'moban'},
            {label : '第三方ID',prop : 'sanfang'},
            {label : '使用签名ID',prop : 'shiyong'},
            {label : '短信业务名称',prop : 'shiyong'},
            {label : '模板内容',prop : 'shiyong'},
            {label : '参数个数',prop : 'shiyong'},
            {label : '参数说明',prop : 'shiyong'},
            {label : '验证码有效时间',prop : 'shiyong'},
            {label : '是否为验证码',prop : 'shifou'},
            {label : '是否短信类型',prop : 'duanx'},
            {label : '模板状态',prop : 'state'},
          ],
          content : [],
      },
        contents : [
            {moban : '123'},
            {sanfang : '456'},
            {shiyong : '789'},
            {shifou : '1'},
            {duanx : '1'},
            {state : '-2'},
        ]
     }
  },
  methods : {
      back () {
        this.$router.push({
          name : 'NoteTemplate'
        })
      }
  },
  created () {
      this.list.content = this.contents.map((item,idx)=>{
          item.duanx && (item.duanx = item.duanx=='0'?'普通短信':'营销短信')
          if (item.shifou || item.shifou == '0') {
              item.shifou = item.shifou=='0'? '否': '是';
          }
          if (item.state || item.state == '0') {
              if (item.state == '-2') {
                item.state = '请求审核失败'
              }
          }
          return item;
      })
  }
}
</script>

<style scoped>
  .content {
    padding:20px;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 10px;
  }
  .content p {
    margin-top: 20px;
  }
  .title {
    font-size: 16px;
    display:inline-block;
    width:150px;
    text-align: justify;
    text-align-last: justify;
    line-height: 0;
  }
  .xq {
    color: #666;
  }
  .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
</style>
